<template>

  <div class="bodyDiv" :style="{height: height +'px'}">

    <div class="sider">
      <div class="header">
        <p class="p3">作业中心</p>
        <p class="p2">—— 家庭成员</p>
      </div>
      <div class="contain">
        <ul v-if="memberFamilyList == null">
          <li><a >暂无数据</a></li>
        </ul>
        <ul v-else>
          <li><a style="color: #f78cf3" @click="returnSkip()">返回</a></li>

          <li v-for="item in memberFamilyList">
            <a @click="personnelClick(item)">{{item.userName}}</a>
          </li>
        </ul>
      </div>
    </div>

    <div class="main">
      <!--<iframe src="bigdata.html" name="preview" width="100%" height="100%" frameborder="no"></iframe>-->

      <div style="width: 100%; height: 100%; border-radius: 1px; ">
        <HomeworkViewSon ref="HomeworkViewSonRef"/>
      </div>

    </div>


  </div>

</template>

<script>

  import http from '@/utils/http'
  import HomeworkViewSon from './HomeworkViewSon.vue'


  export default {
    name: "HomeworkView",
    components: {
      HomeworkViewSon
    },
    data(){
      return {
        // 获取浏览器可视区域高度（包含滚动条）、
        // 获取浏览器可视区域高度（不包含工具栏高度）、
        // 获取body的实际高度  (三个都是相同，兼容性不同的浏览器而设置的)
        height:window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
        // 家庭成员，子女信息
        memberFamilyList: null,
      }
    },
    methods: {
      /**
       * 获取子女信息
       */
      getSonInfo(){
        http.post("/homework/getSonInfo", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.memberFamilyList = res.data
          console.log(this.memberFamilyList)
          // 页面初始化数据
          if (this.memberFamilyList != null && this.memberFamilyList.length > 0){
            this.personnelClick(this.memberFamilyList[0])
          }

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 用户被点击
       * @param memberFamily 家庭成员信息
       */
      personnelClick(memberFamily){
        this.$refs.HomeworkViewSonRef.initUser(memberFamily)
      },
      /**
       * 返回页面
       */
      returnSkip(){
        this.$router.push({
          name:"toHomework",
          // 除了这种方式传参，还可以 params 方式传参，参考：https://blog.csdn.net/sinat_52319736/article/details/127464798
          query: {
            // dynamicId: row.id,
          }
        })
      },
    },
    mounted(){
      document.body.style.height = window.innerHeight + 'px';
      this.getSonInfo()
    }
  }
</script>

<style scoped>

  .bodyDiv {
    margin: 0;
    padding: 0;
    /*指向了静态资源图片*/
    background: url('../../assets/images/homework/bg.png') #0E2252;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg', sizingMethod='scale');
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
  }

  .sider {
    display: flex;
    flex-direction: column;
    padding: 10px;
    width: 15%;
    height: 95%;
    background: rgba(4, 65, 136, 0.6);
    z-index: 998;
    border-radius: 15px;
  }

  .header {
    width: 100%;
    margin: 0 auto;
  }

  .header p.p1 {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    margin-top: 110px;
  }

  .header p.p2 {
    height: 40px;
    margin: 0 auto;
    text-align: center;
    line-height: 40px;
    margin-top: 10px;
    font-size: 20px;
    color: #fec468;
  }

  .header p.p3 {
    height: 40px;
    margin: 0 auto;
    text-align: center;
    line-height: 40px;
    font-size: 28px;
    color: #bddde6;
  }

  .contain {
    flex: 1;
    overflow-y: scroll;
  }

  .contain::-webkit-scrollbar {
    width: 5px;
    background-color: #666;
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #eee;
  }

  .contain::-webkit-scrollbar:hover {
    background-color: #666;
  }

  .contain::-webkit-scrollbar:active {
    background-color: #666;
  }

  .contain::-webkit-scrollbar-thumb {
    background-color: #0394C3;
  }

  .contain ul {
    list-style: none;
    padding: 0 15px 0 0;
  }

  .contain ul li {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-image: url('../../assets/images/homework/kuang.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-bottom: 10px;
    background-color: transparent;
  }

  .contain ul li:hover {
    background: url('../../assets/images/homework/chooseKuang.png') center center no-repeat;
    background-size: 100% 100%;
  }

  .contain ul li a {
    color: #57daff;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
  }

  .contain ul li a:hover {
    color: #FFF;
    font-size: 16px;
  }

  .contain ul li a:visited {
    color: #00EA37;
    font-size: 16px;
  }

  .main {
    width: 81%;
    height: 95%;
    overflow: hidden;
    position: relative;
    background: rgba(4, 65, 136, 0.6);
    border: solid 10px transparent;
    border-radius: 15px;
    text-align: center;
  }


</style>
